<template>
  <div class="shifts">
    <div class="top">
      <conHeader></conHeader>
    </div>
    <div class="content">
      <div class="header">
        <div class="con">时间</div>
        <div class="con">
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div class="con">-</div>
        <div class="con">
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div class="con"><el-button type="primary" size="small" @click="searchList">搜索</el-button></div>
        <div class="con"><el-button type="primary" size="small" @click="shifts">交班</el-button></div>
      </div>
      <!--表格-->
      <div class="tab">
        <el-table
          border
          :data="shiftsList"
          style="width: 100%">
          <el-table-column
            prop="no"
            label="班次号"
            width="180"
            align="center">
          </el-table-column>
          <el-table-column
            label="班次时间"
            width="320"
            align="center">
            <template slot-scope="scope">
              <span>{{scope.row.start_at}} - {{scope.row.end_at}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="creator_name"
            label="当班人"
            width="88"
            align="center">
          </el-table-column>
          <el-table-column
            prop="total_receipt"
            label="总收款"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="total_deposit"
            label="总押金"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="total_consume"
            label="总消费"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="total_refund"
            label="总退款"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="total_income"
            label="总结账收入"
            align="center">
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="listTotal"
            @current-change="currentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <!--交班信息板块-->
    <transition name="el-fade-in-linear">
      <div class="shiftsBox box" v-if="shiftsShow">
        <i class="el-icon-close close" @click="closeBox"></i>
        <alertAss box_type="9" :parameter_9="shiftsInfo" @close="closeBox"></alertAss>
      </div>
    </transition>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import alertAss from '../assembly/alertAss'
  import conHeader from '../assembly/conHeader'
    export default {
      name: "shifts-index",
      components: {
        conHeader,
        alertAss
      },
      data() {
        return {
          startTime:'', //开始时间
          endTime:'', //结束时间
          shiftsList:[], //表格内容
          listTotal:6, //分页总条数
          /*----------------------------------------交班信息-----------------------------------------*/
          shiftsShow:false, //板块显示
          shiftsInfo:[], //板块参数
          page:1, //当前页
        }
      },
      created() {
        let self = this
        self.searchList()
      },
      mounted() {
        let self = this
      },
      methods: {
        ...mapActions([
          'upstate'
        ]),
        //搜索
        searchList(){
          let self = this
          self.$http.post(self.conURL + 'hotel/work/listhandover',{
            stime:self.start_time,
            etime:self.end_time,
            page:self.page
          }).then(res => {
            if (res.data.code == 0){
              self.shiftsList = res.data.data.data
              self.listTotal = res.data.data.total
            }else {
              self.createMess(res.data.msg)
            }
          })
        },
        //分页：页面选择事件
        currentChange(val) {
          let self = this
          self.page = val
          self.getOrderList()
        },
        //交班
        shifts() {
          let self = this
          self.shiftsShow = true
          self.$http.post(self.conURL + 'hotel/work/showhandover').then(res => {
            if (res.data.code == 0){
              self.shiftsInfo = res.data.data
            }else {
              self.createMess(res.data.msg)
            }
          })
        },
        //关闭交班信息板块
        closeBox () {
          let self = this
          self.shiftsShow = false
          self.shiftsInfo = []
        },
        /*---------------------------公共方法---------------------------*/
        /*接口请求失败，提示信息*/
        createMess(msg){
          this.$notify.error({
            title: '错误',
            message: msg
          });
        },
      }
    }
</script>

<style lang="less" scoped>
  page{
    background: #fff;
  }
  .shifts{
    width: 100%;
    height: 100%;
    .box{
      background: #fff;
      border: 1px solid #26a69a;
      border-top: 5px solid #26a69a;
    }
    /*交接班信息*/
    .shiftsBox{
      position: absolute;
      left: 35%;
      top: 10%;
      z-index: 99;
      .close{
        font-size: 20px;
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
      }
    }
    .top{
      width: 100%;
      height: 48px;
      background: #fff;
      -webkit-box-shadow: 0px 3px 3px #dcdfe6;
      box-shadow: 0px 3px 3px #dcdfe6;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
    }
    .content{
      padding-top: 48px;
      .header{
        padding: 15px;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        display: flex;
        flex-direction: row;
        background: #fff;
        .con{
          margin-right: 10px;
          line-height: 40px;
        }
      }
      .tab{
        background: #fff;
        padding: 15px;
        display: flex;
        flex-direction: column;
        .pagination{
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
